<template>
<!--  <div></div>-->
  <div class="position">♥人格图鉴简介♥</div>
<!--<div v-for="index in info" :key="index.id">-->
  <el-row gutter="10">
    <el-col :span="6">
<!--      <div v-for="index in info" :key="index.id" class="image-middle">-->
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <el-image :src="require('../../image/INTP.png')" @click="Image(1)" slot="reference" class="image"/>
        <div style="padding: 8px">
          <span>INTP逻辑学家</span>
          <div class="bottom">
<!--            <time class="time">{{ currentDate }}</time>-->
            <el-button text class="button" @click="Image(1)" >Check</el-button>
          </div>
        </div>
      </el-card>
    </el-col>

    <el-col :span="6">
      <!--      <div v-for="index in info" :key="index.id" class="image-middle">-->
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <el-image :src="require('../../image/INTJ.png')" @click="Image(2)" slot="reference" class="image"/>
        <div style="padding: 8px">
          <span>INTJ建筑师</span>
          <div class="bottom">
            <!--            <time class="time">{{ currentDate }}</time>-->
            <el-button text class="button" @click="Image(2)" >Check</el-button>
          </div>
        </div>
      </el-card>

    </el-col>

    <el-col :span="6">
      <!--      <div v-for="index in info" :key="index.id" class="image-middle">-->
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <el-image :src="require('../../image/ENTP.png')" @click="Image(3)" slot="reference" class="image"/>
        <div style="padding: 8px">
          <span>ENTP辩论家</span>
          <div class="bottom">
            <!--            <time class="time">{{ currentDate }}</time>-->
            <el-button text class="button" @click="Image(3)" >Check</el-button>
          </div>
        </div>
      </el-card>
    </el-col>

    <el-col :span="6">
      <!--      <div v-for="index in info" :key="index.id" class="image-middle">-->
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <el-image :src="require('../../image/ENTJ.png')" @click="Image(4)" slot="reference" class="image"/>
        <div style="padding: 8px">
          <span>ENTJ指挥官</span>
          <div class="bottom">
            <!--            <time class="time">{{ currentDate }}</time>-->
            <el-button text class="button" @click="Image(4)" >Check</el-button>
          </div>
        </div>
      </el-card>
    </el-col>

    <el-col :span="6">
      <!--      <div v-for="index in info" :key="index.id" class="image-middle">-->
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <el-image :src="require('../../image/ENFJ.png')" @click="Image(5)" slot="reference" class="image"/>
        <div style="padding: 8px">
          <span>ENFJ主人公</span>
          <div class="bottom">
            <!--            <time class="time">{{ currentDate }}</time>-->
            <el-button text class="button" @click="Image(5)" >Check</el-button>
          </div>
        </div>
      </el-card>
    </el-col>

    <el-col :span="6">
      <!--      <div v-for="index in info" :key="index.id" class="image-middle">-->
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <el-image :src="require('../../image/INFJ.png')" @click="Image(6)" slot="reference" class="image"/>
        <!--        <img-->
        <!--            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
        <!--            class="image"-->
        <!--        />-->
        <div style="padding: 8px">
          <span>INFJ提倡者</span>
          <div class="bottom">
            <!--            <time class="time">{{ currentDate }}</time>-->
            <el-button text class="button" @click="Image(6)" >Check</el-button>
          </div>
        </div>
      </el-card>
    </el-col>

    <el-col :span="6">
      <!--      <div v-for="index in info" :key="index.id" class="image-middle">-->
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <el-image :src="require('../../image/INFP.png')" @click="Image(7)" slot="reference" class="image"/>
        <!--        <img-->
        <!--            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
        <!--            class="image"-->
        <!--        />-->
        <div style="padding: 8px">
          <span>INFP调停者</span>
          <div class="bottom">
            <!--            <time class="time">{{ currentDate }}</time>-->
            <el-button text class="button" @click="Image(7)" >Check</el-button>
          </div>
        </div>
      </el-card>
    </el-col>

    <el-col :span="6">
      <!--      <div v-for="index in info" :key="index.id" class="image-middle">-->
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <el-image :src="require('../../image/ENFP.png')" @click="Image(8)" slot="reference" class="image"/>
        <!--        <img-->
        <!--            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
        <!--            class="image"-->
        <!--        />-->
        <div style="padding: 8px">
          <span>ENFP竞选者</span>
          <div class="bottom">
            <!--            <time class="time">{{ currentDate }}</time>-->
            <el-button text class="button" @click="Image(8)" >Check</el-button>
          </div>
        </div>
      </el-card>
    </el-col>

    <el-col :span="6">
      <!--      <div v-for="index in info" :key="index.id" class="image-middle">-->
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <el-image :src="require('../../image/ESFP.png')" @click="Image(9)" slot="reference" class="image"/>
        <!--        <img-->
        <!--            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
        <!--            class="image"-->
        <!--        />-->
        <div style="padding: 8px">
          <span>ESFP表演者</span>
          <div class="bottom">
            <!--            <time class="time">{{ currentDate }}</time>-->
            <el-button text class="button" @click="Image(9)" >Check</el-button>
          </div>
        </div>
      </el-card>
    </el-col>

    <el-col :span="6">
      <!--      <div v-for="index in info" :key="index.id" class="image-middle">-->
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <el-image :src="require('../../image/ISFP.png')" @click="Image(10)" slot="reference" class="image"/>
        <!--        <img-->
        <!--            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
        <!--            class="image"-->
        <!--        />-->
        <div style="padding: 8px">
          <span>ISFP探险家</span>
          <div class="bottom">
            <!--            <time class="time">{{ currentDate }}</time>-->
            <el-button text class="button" @click="Image(10)" >Check</el-button>
          </div>
        </div>
      </el-card>
    </el-col>

    <el-col :span="6">
      <!--      <div v-for="index in info" :key="index.id" class="image-middle">-->
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <el-image :src="require('../../image/ISTP.png')" @click="Image(11)" slot="reference" class="image"/>
        <!--        <img-->
        <!--            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
        <!--            class="image"-->
        <!--        />-->
        <div style="padding: 8px">
          <span>ISTP鉴赏家</span>
          <div class="bottom">
            <!--            <time class="time">{{ currentDate }}</time>-->
            <el-button text class="button" @click="Image(11)" >Check</el-button>
          </div>
        </div>
      </el-card>
    </el-col>

    <el-col :span="6">
      <!--      <div v-for="index in info" :key="index.id" class="image-middle">-->
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <el-image :src="require('../../image/ESTP.png')" @click="Image(12)" slot="reference" class="image"/>
        <!--        <img-->
        <!--            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
        <!--            class="image"-->
        <!--        />-->
        <div style="padding: 8px">
          <span>ESTP企业家</span>
          <div class="bottom">
            <!--            <time class="time">{{ currentDate }}</time>-->
            <el-button text class="button" @click="Image(12)" >Check</el-button>
          </div>
        </div>
      </el-card>
    </el-col>

    <el-col :span="6">
      <!--      <div v-for="index in info" :key="index.id" class="image-middle">-->
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <el-image :src="require('../../image/ISFJ.png')" @click="Image(13)" slot="reference" class="image"/>
        <!--        <img-->
        <!--            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
        <!--            class="image"-->
        <!--        />-->
        <div style="padding: 8px">
          <span>ISFJ守卫者</span>
          <div class="bottom">
            <!--            <time class="time">{{ currentDate }}</time>-->
            <el-button text class="button" @click="Image(13)" >Check</el-button>
          </div>
        </div>
      </el-card>
    </el-col>

    <el-col :span="6">
      <!--      <div v-for="index in info" :key="index.id" class="image-middle">-->
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <el-image :src="require('../../image/ESFJ.png')" @click="Image(14)" slot="reference" class="image"/>
        <!--        <img-->
        <!--            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
        <!--            class="image"-->
        <!--        />-->
        <div style="padding: 8px">
          <span>ESFJ执政官</span>
          <div class="bottom">
            <!--            <time class="time">{{ currentDate }}</time>-->
            <el-button text class="button" @click="Image(14)" >Check</el-button>
          </div>
        </div>
      </el-card>
    </el-col>

    <el-col :span="6">
      <!--      <div v-for="index in info" :key="index.id" class="image-middle">-->
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <el-image :src="require('../../image/ESTJ.png')" @click="Image(15)" slot="reference" class="image"/>
        <!--        <img-->
        <!--            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
        <!--            class="image"-->
        <!--        />-->
        <div style="padding: 8px">
          <span>ESTJ总经理</span>
          <div class="bottom">
            <!--            <time class="time">{{ currentDate }}</time>-->
            <el-button text class="button" @click="Image(15)" >Check</el-button>
          </div>
        </div>
      </el-card>
    </el-col>

    <el-col :span="6">
      <!--      <div v-for="index in info" :key="index.id" class="image-middle">-->
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <el-image :src="require('../../image/ISTJ.png')" @click="Image(16)" slot="reference" class="image"/>
        <!--        <img-->
        <!--            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
        <!--            class="image"-->
        <!--        />-->
        <div style="padding: 8px">
          <span>ISTJ物流师</span>
          <div class="bottom">
            <!--            <time class="time">{{ currentDate }}</time>-->
            <el-button text class="button" @click="Image(16)" >Check</el-button>
          </div>
        </div>
      </el-card>
    </el-col>

  </el-row>

  <el-dialog custom-class="saveAsDialog" v-model="dialogVisible" @close="this.dialogVisible = false" >
    <!--    <div v-for="" :key="index" class="image-middle">-->
    <!--    <el-image :src="this.imagepath"></el-image>-->
    <el-image :src="this.imagepath" class="imagePreview"/>
    <!--    </div>&lt;!&ndash;          </img>&ndash;&gt;-->
  </el-dialog>
<!--</div>-->
</template>

<script>
export default {
  name:"path2",
  data() {
    return {
      dialogVisible:false,
      imagepath:'',
      info:[
        {
          "id":1,
          "src":require('../../image/INTP.png'),
        },
        {
          "id":2,
          "src":require('../../image/INTJ.png'),
        },
        {
          "id":3,
          "src":require('../../image/ENTP.png'),
        },
        {
          "id":4,
          "src":require('../../image/ENTJ.png'),
        },
        {
          "id":5,
          "name":"build",
          "src":require('../../image/ENFJ.png'),
        },
        {
          "id":6,
          "src":require('../../image/INFJ.png'),
        },
        {
          "id":7,
          "src":require('../../image/INFP.png'),
        },
        {
          "id":8,
          "src":require('../../image/ENFP.png'),
        },
        {
          "id":9,
          "src":require('../../image/ESFP.png'),
        },
        {
          "id":10,
          "src":require('../../image/ISFP.png'),
        },

        {
          "id":11,
          "src":require('../../image/ISTP.png'),
        },
        {
          "id":12,
          "src":require('../../image/ESTP.png'),
        },
        {
          "id":13,
          "src":require('../../image/ISFJ.png'),
        },
        {
          "id":14,
          "src":require('../../image/ESFJ.png'),
        },
        {
          "id":15,
          "src":require('../../image/ESTJ.png'),
        },
        {
          "id":16,
          "src":require('../../image/ISTJ.png'),
        },
      ]
    };
  },


  methods:{

    Image(theid){
      // for (let i = 1; i < 17; i++) {
      //   if(){
          this.dialogVisible = true
          this.imagepath = this.info[theid-1].src
        // }
      // }
    }

  }

  };



</script>

<style scoped>
/deep/ .saveAsDialog {
  width: 1200px !important;
}

.position {
  margin-left: 15px;
  font-size: 30px;
  font-weight: 600;
}
/* 图片总布局，样式 */
.images{
  display: flex;
  margin-top: 20px;
  margin-left: 21px;
  margin-right: 20px;
  flex-wrap: wrap;
}
/* 图片之间 */
.image-middle{
  margin-right: 15px;
  margin-bottom: 15px;
}
/* 单张图片样式 */
.image{
  width:100%;
  height: 110px;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

/*.image {*/
/*  width: 100%;*/
/*  display: block;*/
/*}*/

</style>